<template>
	<view :style="{overflow: 'auto', marginTop: '30rpx',}">
		<template>
			<view v-for="(item) in JSON.parse(this.showQuestion.selections)" :key="item.code">
				<view
					@click="checkboxQuest(item.code)"
					class="questionTextItem"
					:style="{
						fontSize: fontSize + 'rpx',
						lineHeight: (fontSize + 12) + 'rpx'
					}"
				>
					<view style="width: 100%; display: flex; flex-direction: row;margin-top: 30rpx;align-items: center;">
						
						<u-icon  v-if="selectAnswer.indexOf(item.code) !== -1 && !showAnalysis"  name="checkmark-circle-fill" size="24" color="#37B874"></u-icon>
						<u-icon  v-if="showAnalysis && showQuestion.stuAnswer.indexOf(item.code) !== -1"  name="checkmark-circle-fill" size="24" color="#37B874"></u-icon>
						<view  v-else-if=" selectAnswer.indexOf(item.code) === -1" class="options">
							{{item.code}} 
						</view>
						<rich-text style="margin-left: 20rpx;margin-top: 6rpx;" :nodes="item.context"></rich-text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "CheckBoxQuerstion",
		props: ['showQuestion', 'selectAnswer', 'windowHeight', 'fontSize','showAnalysis'],
		mounted() {
		
		},
		methods: {
			
			checkboxQuest(code){
				console.log(code.indexOf('B'), 'code');
				
				console.log(JSON.parse(this.showQuestion.selections))
				let AnswerArr = Array.from(JSON.parse(this.showQuestion.selections), item => item.code)
				// let AnswerArr = Array.from(this.showQuestion.selections, item => item.code)
				let selectData = this.selectAnswer ? this.selectAnswer.split('') : []
				if (this.selectAnswer.indexOf(code) !== -1) {
					let newArr = []
					selectData.map(item => {
						if (item !== code && AnswerArr.includes(item)) {
							newArr.push(item)
						}
					})
					this.$parent.onChange(newArr.sort().join(''))
				} else {
					selectData.push(code)
					this.$parent.onChange(selectData.sort().join(''))
				}
			},
		},
	}
</script>

<style scoped>
	.options {
		/* width: 48rpx; */
		padding: 0 12rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		border: '1px solid #EAEAEA';
		border-radius: 50%;
		background: linear-gradient(357.46deg, #E3E3E3 1.95%, #FFFFFF 91.89%);
	}
</style>
